<template>
  <div class="app-container">
    <el-form  class="query-wrapper" :model="queryParams" inline>
      <el-form-item  prop="vesselName">
        <el-input v-model="queryParams.vesselName" style="width: 180px" placeholder="Vessel Name" />
      </el-form-item>
      <el-form-item> 
        <el-button type="primary" icon="search" @click="search">{{
          $t("ship.button.search")
        }}</el-button>
         <SearchReset :query-params="queryParams" @reset="resetQuery"></SearchReset>
        <el-button type="primary" plain icon="Plus" @click="addClickEvent"  v-hasPermi="['vessel:add']">
          {{ $t("ship.button.plus") }}
        </el-button>
       </el-form-item>
    </el-form>
  </div>

  <el-table
    ref="tableRef"
    stripe
    :border="true"
    class="daf-table"
    :data="listData"
    show-overflow-tooltip
    @row-dblclick="handleRowDblclick"
    @sort-change="handleSortChange"
  > 

    <el-table-column prop="vesselName" label="Vessel Name"   width="160"/>
    <el-table-column prop="vesselCode" label="Vessel Code"  width="120" />
    <el-table-column prop="imoNumber" label="IMO Nuber"  width="100" />
    <el-table-column prop="nrt" label="N.R.T"  show-overflow-tooltip />
    <el-table-column prop="flagState" label="FLAG STATE"  width="150"   />
    <el-table-column prop="portRegistry" label="PORT REGISTRY"  width="140" />
    <el-table-column prop="classificationSociety" label="CLASSIFICATION SOCIETY"  width="200"/>
    <el-table-column prop="yearBuild" label="YEAR BUILT"   width="160" />
    <el-table-column prop="capacity" label="RT43 CAPACITY"    width="160"/>
    <el-table-column prop="pdf" label="pdf" min-width="180">
      <template #default="scope" class="image_content">
        <PreViewImageUpload :record="scope.row" :photos="Array.isArray(scope.row.pdfs)?scope.row.pdfs:scope.row.pdfs?[scope.row.pdfs]:[]" :url="uploadUrl" :id="scope.row.vesselId" :accept="accept"
          @onSuccess="submitUploadForm" :isDelSub="true" :isPreview="true"    @onDelete="deleteUpload"  />
      </template>
    </el-table-column>
    <el-table-column prop="owner" label="REGISTERED OWNER"   width="220" />
    <el-table-column prop="technicalManager" label="TECHNICAL MANAGER"  width="180"   />
    <el-table-column prop="bbcOwner" label="BBC OWNER"  width="160"  />
    <el-table-column prop="sternRampSwl" label="STERN RAMP SWL"  width="160"   />
    <el-table-column prop="sideRampSwl" label="SIDE RAMP SWL" width="160"   />
    <el-table-column prop="hoistableDeck" label="HOISTABLE DECK" width="160"   />
    <el-table-column prop="createBy" label="Created By" width="160"   />
    <el-table-column label="Operation" fixed="right" width="120"  v-hasPermi="['vessel:edit']">
      <template #default="scope">
        <span class="btn-primary" @click="editClickEvent(scope.row)">{{
          $t("ship.button.edit")
        }}</span
        >&nbsp;&nbsp;
        <span class="btn-primary" @click="removeClickEvent(scope.row.vesselId)">{{
          $t("ship.button.remove")
        }}</span>
      </template>
    </el-table-column>
  </el-table>

  <pagination
    v-show="total > 0"
    :total="total"
    :page="queryParams.pageNum"
    :limit="queryParams.pageSize"
    @pagination="pageQuery"
    style="float: right"
  />

  <el-dialog
    :width="800"
    destroy-on-close
    draggable
    :title="dialogTitle"
    v-model="dialogFormVisible"
  >
    <el-form :model="formParam" :rules="rules" ref="custForm" label-width="170px">
      <el-row>
        <el-col :span="12">
          <el-form-item
            label="Vessel Name"
            prop="vesselName"
            required
          >
            <el-input v-model="formParam.vesselName"></el-input>
          </el-form-item>
        </el-col> 
        <el-col :span="12">
          <el-form-item
            label="Vessel Code"
            prop="vesselCode"
            required
          >
            <el-input v-model="formParam.vesselCode"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item
            label="IMO Number"
            prop="imoNumber"
            required
          >
            <el-input v-model="formParam.imoNumber"></el-input>
          </el-form-item>
        </el-col> 
        <el-col :span="12">
          <el-form-item
            label="N.R.T"
            prop="nrt"
            required
          >
            <el-input v-model="formParam.nrt"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item
            label="FLAG STATE"
            prop="flagState" 
          >
            <el-input v-model="formParam.flagState"></el-input>
          </el-form-item>
        </el-col> 
        <el-col :span="12">
          <el-form-item
            label="PORT REGISTRY"
            prop="portRegistry" 
          >
            <el-input v-model="formParam.portRegistry"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item
            label="CLASSIFICATION SOCIETY"
            prop="classificationSociety" 
          >
            <el-input v-model="formParam.classificationSociety"></el-input>
          </el-form-item>
        </el-col> 
        <el-col :span="12">
          <el-form-item
            label="YEAR BUILT"
            prop="yearBuild" 
          >
            <el-input type="number" v-model="formParam.yearBuild"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item
            label="RT43 CAPACITY"
            prop="capacity" 
          >
            <el-input v-model="formParam.capacity"></el-input>
          </el-form-item>
        </el-col> 
        <el-col :span="12">
          <el-form-item
            label="REGISTERED OWNER"
            prop="registedOwner" 
          >
            <el-input v-model="formParam.owner"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item
            label="TECHNICAL OWNER"
            prop="technicalOwner" 
          >
            <el-input v-model="formParam.technicalOwner"></el-input>
          </el-form-item>
        </el-col> 
        <el-col :span="12">
          <el-form-item
            label="TECHNICAL MANAGER"
            prop="technicalManager" 
          >
            <el-input v-model="formParam.technicalManager"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item
            label="BBC OWNER"
            prop="bbcWwner" 
          >
            <el-input v-model="formParam.bbcOwner"></el-input>
          </el-form-item>
        </el-col> 
        <el-col :span="12">
          <el-form-item
            label="STERN RAMP SWL"
            prop="sternRampSwl" 
          >
            <el-input v-model="formParam.sternRampSwl"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item
            label="SIDE RAMP SWL"
            prop="bbcWwner" 
          >
            <el-input v-model="formParam.sideRampSwl"></el-input>
          </el-form-item>
        </el-col> 
        <el-col :span="12">
          <el-form-item
            label="HOISTABLE DECK"
            prop="hoistableDeck" 
          >
            <el-input v-model="formParam.hoistableDeck"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible = false">{{
          $t("ship.button.cancel")
        }}</el-button>
        <el-button @click="resetForm" type="warning">{{
          $t("ship.button.reset")
        }}</el-button>
        <el-button type="primary" @click="submitForm">{{
          $t("ship.button.submit")
        }}</el-button>
      </span>
    </template>
  </el-dialog>
 
</template>
<script lang="ts" setup name="vessel">
// @ts-nocheck
import { ref, onMounted, reactive } from "vue";
import moment from "moment";
import { useStore } from "vuex";
import service from "@/utils/request"; 
import { ElNotification, ElMessageBox } from "element-plus"; 
import { useTableDrag } from '@/hooks/useHooks'
import PreViewImageUpload from '@/components/ImageUpload/PreViewImageUpload.vue'
const { tableRef, proxy } = useTableDrag();
const accept=ref('.pdf') //上传格式
const uploadUrl = '/shipping/vessel/uploadFile'   //上传接口
const custForm = ref(null);
const dialogTitle = ref("");
const dialogTitle1 = ref("");
const initForm = {
  vesselId: null,
  vesselName: null,
  vesselCode: null,
  imoNumber: null,
  nrt: null,
  flagState: null, 
  classificationSociety:null,
  yearBuild: null,
  capacity: null,
  portRegistry: null,
  owner:null,
  technicalOwner:null,
  technicalManager: null,
  bbcOwner: null,
  sternRampSwl:null, 
  sideRampSwl: null,
  hoistableDeck: null
};
const formParam = reactive(Object.assign({}, initForm));

const total = ref(0);

const rules = ref({
  vesselName: [{ required: true, message: "Vessel Name can't be blank" }],
  vesselCode: [{ required: true, message: "Vessel Code can't be blank" }],
  nrt: [{ required: true, message: "N.R.T can't be blank" }],
  imoNumber: [{ required: true, message: "IMO Number can't be blank" }]
});

const queryParams = reactive({
  pageNum: 1,
  pageSize: 20,
  vesselName: null,
  orderByColumn: undefined,
  isAsc: undefined,
});

 
const listData = ref([]);
const refreshTable = async () => {
  let result = await service.get("/shipping/vessel/getTable", { params: queryParams });
  listData.value = result.data;
  total.value = result.total;
};
const resetQuery = (data) => {
    Object.assign(queryParams, data)
    refreshTable()
}
const dialogFormVisible = ref(false);
const dialogFormVisible1 = ref(false);
const handleRowDblclick=(row:any)=>{
  dialogTitle1.value = "View Vessel";
  dialogFormVisible1.value = true;
  Object.keys(initForm).forEach((k) => (formParam[k] = row[k])); 
}
const editClickEvent = (row: any) => {
  dialogTitle.value = "Update Vessel";
  dialogFormVisible.value = true;
  Object.keys(initForm).forEach((k) => (formParam[k] = row[k]));
  isAdd = false;
};

let isAdd = false;

const addClickEvent = () => {
  dialogTitle.value = "Add vessel";
  isAdd = true;
  dialogFormVisible.value = true;
  Object.assign(formParam, initForm);
};

const resetForm = () => {
  // @ts-ignore
  custForm.value.resetFields();
};

const submitForm = () => {
  // @ts-ignore
  custForm.value.validate(async (valid) => {
    if (!valid) {
      // @ts-ignore
      return;
    }

    await service[isAdd ? "post" : "put"]("shipping/vessel", formParam);
    // @ts-ignore
    ElNotification.success({
      title: "Prompt information",
      message: "save successful!",
      position: "bottom-right",
    });
    dialogFormVisible.value = false;
    refreshTable();
  });
};

const pageQuery = async (e) => {
  queryParams.pageNum = e.page;
  queryParams.pageSize = e.limit;
  refreshTable();
};

const search = () => {
  refreshTable();
};

const sleep = (ms) => {
  return new Promise((resolve) => setTimeout(resolve, ms));
};

const handleSortChange = async (column: any) => {
  queryParams.orderByColumn = column.prop;
  queryParams.isAsc = column.order; //动态取值排序顺序
  refreshTable();
};

const removeClickEvent = (id) => {
  ElMessageBox.confirm("Confirm to Remove the data？", "Confirmation Information", {
    type: "warning",
    confirmButtonText: "Confirm",
    cancelButtonText: "Cancel",
  }).then(async () => {
    await service.delete(`shipping/vessel/${id}`);

    refreshTable();
    // @ts-ignore
    ElNotification.success({
      title: "Prompt information",
      message: "Delete successfully!",
      position: "bottom-right",
    });
  });
};
// 上传成功更新数据
const deleteUpload = async (data) => {
  const params = {
    id: data.id,
    url: data.url
  };
  await service["post"]("/shipping/vessel/deleteFile", params); 
 
  // // @ts-ignore
  ElNotification.success({
    title: "Prompt information",
    message: "delete successful!",
    position: "bottom-right"
  });
  refreshTable();
};


// 上传成功更新数据
const submitUploadForm = async (data) => { 
  // @ts-ignore
  const params = {
    vesselId: data.id,
    pdfs: data.photos
  };

  await service["put"]("/shipping/vessel/update", params);
  // // @ts-ignore
  ElNotification.success({
    title: "Prompt information",
    message: "save successful!",
    position: "bottom-right"
  });
  refreshTable();
};


onMounted(async () => {
  refreshTable();
});
</script>
 <style lang="scss" scoped>
    ::v-deep.el-table td.el-table__cell div{
    text-align: center;
  }
 </style>